<template>
  <div class="API"  :style="{ margin: '24px 16px', padding: '24px' ,backgroundColor:'#FFF' }">
    <a-table bordered :columns="columns" :data-source="APIs" :loading="isloading" rowKey="backendApiId"
             :pagination="false"  :scroll="{ y: 600 }" >
      <template slot="action" slot-scope="row">
        <a-space>
          <a @click="onEditAPI(row)">修改</a>
        </a-space>
      </template>
    </a-table>
    <a-modal
        :title="currEditAPI===null?'':'当前修改API名称:'+currEditAPI.backendApiName"
        :visible="editModalShow"
        @ok="handleOk"
        @cancel="handleCancel"
    >

      <div>
        <a-form :form="catchAPI" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-form-item label="API名称">
            <a-input v-model="catchAPI===null?'':catchAPI.backendApiName"/>
          </a-form-item>
          <a-form-item label="请求路径">
            <a-input v-model="catchAPI===null?'':catchAPI.backendApiUrl"/>
          </a-form-item>
          <a-form-item label="请求方法">
            <a-select
                mode="multiple"
                size="large"
                placeholder="请选择方法"
                style="width: 200px"
                :value="catchAPI===null?'':catchAPI.backendApiMethod.split(',')"
                @change="onselectChange"
            >
              <a-select-option v-for="item in mountedOption" :key="item">
                {{ item }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="描述">
            <a-textarea
                v-model="catchAPI===null?'':catchAPI.description"
                placeholder="请输入描述"
                :auto-size="{ minRows: 3, maxRows: 5 }"
            />
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>

<script>

export default {
  name: 'API',
  data() {
    return {
      mountedOption: ['GET', 'POST', 'PUT', 'DELETE'],
      //是否显示modal
      editModalShow: false,
      //当前选中的的数据
      currEditAPI: null,
      //表单中的数据
      catchAPI: null,
      //正在加载
      isloading: true,
      //当前选中的数据id
      currentEditAPIID: '',
      APIs: [],
      columns: [
        {
          title: 'Id',
          dataIndex: 'backendApiId',
          key: 'backendApiId'
        },
        {
          title: 'API名',
          dataIndex: 'backendApiName',
          key: 'backendApiName'
        },
        {
          title: '请求路径',
          dataIndex: 'backendApiUrl',
          key: 'backendApiUrl'
        },
        {
          title: '请求方法',
          dataIndex: 'backendApiMethod',
          key: 'backendApiMethod'
        },
        {
          title: '描述',
          dataIndex: 'description',
          key: 'description'
        },
        {
          title: '操作',
          key: 'action',
          scopedSlots: {customRender: 'action'}
        }

      ]
    }
  },
  mounted() {
    this.getAPIAll()
  },
  methods: {
    //获取所有API信息
    getAPIAll() {
      this.$axios({
        method: 'get',
        url: '/backendApi/getAPIAll'
      }).then(res => {
        this.APIs = res.data.data
        this.isloading = false

      })
    },
    //点击表格中的修改
    onEditAPI(row) {
      this.selectOption = ['GET', 'POST', 'PUT', 'DELETE']
      this.currentEditAPIID = row.backendApiId
      this.currEditAPI = row
      this.catchAPI = null
      this.catchAPI = {...row}
      this.editModalShow = true
    },
    //模态框点击确认
    handleOk() {
      this.editModalShow = false
      this.currentEditAPIID = ''

      this.currEditAPI.backendApiName = this.catchAPI.backendApiName
      this.currEditAPI.backendApiUrl = this.catchAPI.backendApiUrl
      this.currEditAPI.backendApiMethod = this.catchAPI.backendApiMethod
      this.currEditAPI.description = this.catchAPI.description

      console.log(this.currEditAPI)
      this.$axios({
        method: 'post',
        url: 'backendApi/updateApi',
        data: {
          'backendApiId': this.currEditAPI.backendApiId,
          'backendApiMethod': this.currEditAPI.backendApiMethod,
          'backendApiName': this.currEditAPI.backendApiName,
          'backendApiSort': this.currEditAPI.backendApiSort,
          'backendApiUrl': this.currEditAPI.backendApiUrl,
          'description': this.currEditAPI.description,
          'pid': this.currEditAPI.pid,
        }
      }).then(res=>{
        if (res.data.code==="200"){
          this.$message.success('修改成功')
        }else {
          this.$message.error('添加失败')
        }
      })
      this.catchAPI = null


    },
    //点击取消按钮
    handleCancel() {
      this.catchAPI = null
      this.editModalShow = false
      this.currentEditAPIID = ''
      this.currEditAPI = null
    },
    //值改变
    onselectChange(value) {

      this.catchAPI.backendApiMethod = value.toString()

    }

  }
}
</script>

<style scoped>

</style>
